{% extends "base.html" %}

{% block title %}主题测试 - 梦幻西游数字资产管理系统{% endblock %}

{% block mobile_title %}主题测试{% endblock %}

{% block content %}
<div class="container-fluid">
    <h2 class="mb-4">🎨 主题系统测试页面</h2>
    
    <!-- 当前主题信息 -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>当前主题信息</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <p><strong>主题ID:</strong> <span id="currentThemeId">-</span></p>
                    <p><strong>主题名称:</strong> <span id="currentThemeName">-</span></p>
                    <p><strong>data-theme属性:</strong> <span id="dataThemeAttr">-</span></p>
                    <p><strong>LocalStorage:</strong> <span id="localStorageTheme">-</span></p>
                </div>
                <div class="col-md-6">
                    <p><strong>主色调:</strong> <span id="primaryColor" style="display: inline-block; width: 100px; height: 30px; border: 1px solid #ccc;"></span> <span id="primaryColorValue">-</span></p>
                    <p><strong>侧边栏背景:</strong> <span id="sidebarBg" style="display: inline-block; width: 100px; height: 30px; border: 1px solid #ccc;"></span> <span id="sidebarBgValue">-</span></p>
                    <p><strong>卡片背景:</strong> <span id="cardBg" style="display: inline-block; width: 100px; height: 30px; border: 1px solid #ccc;"></span> <span id="cardBgValue">-</span></p>
                </div>
            </div>
            <button class="btn btn-primary" onclick="updateThemeInfo()">刷新信息</button>
            <button class="btn btn-secondary" onclick="testAllThemes()">测试所有主题</button>
        </div>
    </div>
    
    <!-- 主题样式测试 -->
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5>按钮测试</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-primary mb-2">Primary Button</button>
                    <button class="btn btn-secondary mb-2">Secondary Button</button>
                    <button class="btn btn-success mb-2">Success Button</button>
                    <button class="btn btn-danger mb-2">Danger Button</button>
                    <button class="btn btn-warning mb-2">Warning Button</button>
                    <button class="btn btn-info mb-2">Info Button</button>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5>徽章测试</h5>
                </div>
                <div class="card-body">
                    <span class="badge bg-primary me-2">Primary</span>
                    <span class="badge bg-secondary me-2">Secondary</span>
                    <span class="badge bg-success me-2">Success</span>
                    <span class="badge bg-danger me-2">Danger</span>
                    <span class="badge bg-warning me-2">Warning</span>
                    <span class="badge bg-info me-2">Info</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 表格测试 -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>表格测试</h5>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>测试数据 1</td>
                        <td><span class="badge bg-success">激活</span></td>
                        <td><button class="btn btn-sm btn-primary">编辑</button></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>测试数据 2</td>
                        <td><span class="badge bg-warning">待审核</span></td>
                        <td><button class="btn btn-sm btn-primary">编辑</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 表单测试 -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>表单测试</h5>
        </div>
        <div class="card-body">
            <form>
                <div class="mb-3">
                    <label class="form-label">文本输入</label>
                    <input type="text" class="form-control" placeholder="请输入文本">
                </div>
                <div class="mb-3">
                    <label class="form-label">下拉选择</label>
                    <select class="form-select">
                        <option>选项 1</option>
                        <option>选项 2</option>
                        <option>选项 3</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">文本域</label>
                    <textarea class="form-control" rows="3"></textarea>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 测试日志 -->
    <div class="card">
        <div class="card-header">
            <h5>测试日志</h5>
        </div>
        <div class="card-body">
            <pre id="testLog" style="max-height: 300px; overflow-y: auto; background: #f5f5f5; padding: 10px; border-radius: 5px;"></pre>
        </div>
    </div>
</div>

<script>
const THEMES = [
    { id: 'default', name: '默认蓝' },
    { id: 'purple', name: '深邃紫' },
    { id: 'emerald', name: '翡翠绿' },
    { id: 'rose', name: '晨曦粉' },
    { id: 'sky', name: '天空蓝' },
    { id: 'orange', name: '橙色日落' },
    { id: 'cyan', name: '青色水波' },
    { id: 'violet', name: '紫罗兰' },
    { id: 'fuchsia', name: '品红' },
    { id: 'amber', name: '琥珀金' },
    { id: 'slate', name: '石板灰' },
    { id: 'forest', name: '森林绿' },
    { id: 'ocean', name: '深海蓝' },
    { id: 'sakura', name: '樱花粉' },
    { id: 'mint', name: '薄荷绿' },
    { id: 'crimson', name: '深红' },
    { id: 'indigo', name: '靛蓝' },
    { id: 'lime', name: '石灰绿' },
    { id: 'rosegold', name: '玫瑰金' },
    { id: 'midnight', name: '午夜黑' }
];

function log(message) {
    const logElement = document.getElementById('testLog');
    const timestamp = new Date().toLocaleTimeString();
    logElement.textContent += `[${timestamp}] ${message}\n`;
    logElement.scrollTop = logElement.scrollHeight;
}

function updateThemeInfo() {
    const root = document.documentElement;
    const currentTheme = root.getAttribute('data-theme') || 'default';
    const storedTheme = localStorage.getItem('app-theme') || '-';
    const themeName = THEMES.find(t => t.id === currentTheme)?.name || '-';
    
    const styles = getComputedStyle(root);
    const primaryColor = styles.getPropertyValue('--primary-color').trim();
    const sidebarBg = styles.getPropertyValue('--sidebar-bg').trim();
    const cardBg = styles.getPropertyValue('--bg-card').trim();
    
    document.getElementById('currentThemeId').textContent = currentTheme;
    document.getElementById('currentThemeName').textContent = themeName;
    document.getElementById('dataThemeAttr').textContent = currentTheme;
    document.getElementById('localStorageTheme').textContent = storedTheme;
    
    document.getElementById('primaryColor').style.backgroundColor = primaryColor;
    document.getElementById('primaryColorValue').textContent = primaryColor;
    
    document.getElementById('sidebarBg').style.backgroundColor = sidebarBg;
    document.getElementById('sidebarBgValue').textContent = sidebarBg;
    
    document.getElementById('cardBg').style.backgroundColor = cardBg;
    document.getElementById('cardBgValue').textContent = cardBg;
    
    log(`主题信息已更新: ${themeName} (${currentTheme})`);
}

function testAllThemes() {
    log('开始测试所有20个主题...');
    let index = 0;
    
    const testInterval = setInterval(() => {
        if (index >= THEMES.length) {
            clearInterval(testInterval);
            log('✅ 所有主题测试完成！');
            return;
        }
        
        const theme = THEMES[index];
        document.documentElement.setAttribute('data-theme', theme.id);
        localStorage.setItem('app-theme', theme.id);
        
        const styles = getComputedStyle(document.documentElement);
        const primaryColor = styles.getPropertyValue('--primary-color').trim();
        const sidebarBg = styles.getPropertyValue('--sidebar-bg').trim();
        
        log(`${index + 1}/${THEMES.length} - ${theme.name} (${theme.id})`);
        log(`  └─ 主色调: ${primaryColor}, 侧边栏: ${sidebarBg}`);
        
        updateThemeInfo();
        index++;
    }, 1500); // 每1.5秒切换一个主题
}

// 页面加载时更新信息
document.addEventListener('DOMContentLoaded', () => {
    updateThemeInfo();
    log('主题测试页面已加载');
    log('点击"测试所有主题"按钮可自动遍历所有主题');
});
</script>
{% endblock %}
